<template>
  <view class="template-contact">
    <!-- 顶部自定义导航栏 -->
    <tn-nav-bar fixed customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
      </view>
      <view slot="content" class="tn-custom-nav-bar__title">合作联系</view>
    </tn-nav-bar>

    <!-- 主要内容区 -->
    <view class="contact-content tn-safe-area-inset-bottom">
      <!-- 联系卡片 -->
      <view class="contact-card tn-shadow">
        <view class="card-title">
          <text class="tn-icon-link tn-padding-right-sm"></text>
          <text>商务合作</text>
        </view>
        
        <!-- 联系方式列表 -->
        <view class="contact-list">
          <!-- 微信 -->
          <view class="contact-item" @click="copyWechat">
            <view class="item-left">
              <text class="tn-icon-wechat tn-color-green"></text>
              <text class="label">微信号</text>
            </view>
            <view class="item-right">
              <text class="value">ai_contact</text>
              <text class="tn-icon-copy"></text>
            </view>
          </view>
          
          <!-- 电话 -->
          <view class="contact-item" @click="makePhoneCall">
            <view class="item-left">
              <text class="tn-icon-phone tn-color-blue"></text>
              <text class="label">联系电话</text>
            </view>
            <view class="item-right">
              <text class="value">182-1912-6666</text>
              <text class="tn-icon-phone-fill"></text>
            </view>
          </view>
          
          <!-- 邮箱 -->
          <view class="contact-item" @click="copyEmail">
            <view class="item-left">
              <text class="tn-icon-email tn-color-orange"></text>
              <text class="label">商务邮箱</text>
            </view>
            <view class="item-right">
              <text class="value">business@ai.com</text>
              <text class="tn-icon-copy"></text>
            </view>
          </view>
        </view>
      </view>

     
    </view>
  </view>
</template>

<script>
export default {
  name: 'contact',
  data() {
    return {
      wechat: 'ai_contact',
      phone: '18219126666',
      email: 'business@ai.com'
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 复制微信号
    copyWechat() {
      uni.setClipboardData({
        data: this.wechat,
        success: () => {
          uni.showToast({
            title: '微信号已复制',
            icon: 'none'
          })
        }
      })
    },
    
    // 拨打电话
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: this.phone,
        success: () => {
          console.log('拨打电话成功')
        },
        fail: () => {
          console.log('拨打电话失败')
        }
      })
    },
    
    // 复制邮箱
    copyEmail() {
      uni.setClipboardData({
        data: this.email,
        success: () => {
          uni.showToast({
            title: '邮箱已复制',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 整体容器样式 */
.template-contact {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-top: var(--status-bar-height);
}

/* 导航栏样式 */
.tn-custom-nav-bar {
  &__back {
    width: 60rpx;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 30rpx;
    
    .icon {
      font-size: 44rpx;
      color: #333333;
    }
  }
  
  &__title {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
  }
}

/* 主内容区样式 */
.contact-content {
  padding: 30rpx;
  margin-top: 90rpx; // 为导航栏留出空间
}

/* 联系卡片样式 */
.contact-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    
    .tn-icon-link {
      color: #0084ff;
      font-size: 36rpx;
      margin-right: 12rpx;
    }
  }
}

/* 联系方式列表样式 */
.contact-list {
  .contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-left {
      display: flex;
      align-items: center;
      
      text {
        &.tn-icon-wechat,
        &.tn-icon-phone,
        &.tn-icon-email {
          font-size: 40rpx;
          margin-right: 20rpx;
        }
        
        &.label {
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
    
    .item-right {
      display: flex;
      align-items: center;
      
      .value {
        font-size: 28rpx;
        color: #666666;
        margin-right: 20rpx;
      }
      
      .tn-icon-copy,
      .tn-icon-phone-fill {
        font-size: 32rpx;
        color: #0084ff;
      }
    }
  }
}


</style>
